<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人作品集</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <div class="container">
            <div class="logo">
                <h1 data-lang="site_title">我的作品集</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="#home" data-lang="nav_home">首页</a></li>
                    <li><a href="#about" data-lang="nav_about">关于我</a></li>
                    <li><a href="#skills" data-lang="nav_skills">技能</a></li>
                    <li><a href="#projects" data-lang="nav_projects">项目</a></li>
                    <li><a href="#contact" data-lang="nav_contact">联系我</a></li>
                </ul>
            </nav>
            <div class="header-actions">
                <div class="theme-switcher">
                    <button class="theme-toggle" title="切换主题">
                        <i class="fas fa-moon"></i>
                    </button>
                </div>
                <div class="language-switcher">
                    <button class="lang-btn" data-lang="zh" title="中文">中</button>
                    <button class="lang-btn" data-lang="en" title="English">EN</button>
                </div>
                <div class="menu-toggle">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main>
        <!-- 首页部分 -->
        <section id="home" class="hero">
            <div class="container">
                <div class="hero-content">
                    <div class="hero-text">
                        <h2 data-lang="home_title">你好，我是<span class="highlight">张三</span></h2>
                        <p class="tagline" data-lang="home_tagline">Python Developer | 消息中间件专家</p>
                        <p data-lang="home_description">专注于实时数据处理、高可用架构设计和分布式系统开发。擅长Python、MongoDB、ElasticSearch等技术。</p>
                        <div class="cta-buttons">
                            <a href="#projects" class="btn primary" data-lang="home_view_projects">查看我的项目</a>
                            <a href="#contact" class="btn secondary" data-lang="home_contact_me">联系我</a>
                        </div>
                    </div>
                    <div class="hero-image">
                        <div class="profile-frame">
                            <img src="images/profile.jpg" alt="张三">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 关于我部分 -->
        <section id="about" class="section">
            <div class="container">
                <h2 class="section-title" data-lang="about_title">关于我</h2>
                
                <!-- 个人简介区域 -->
                <div class="about-intro">
                    <div class="about-photo">
                        <div class="profile-frame-large">
                            <img src="https://kirineko.github.io/hita.png" alt="个人照片">
                        </div>
                    </div>
                    <div class="about-summary">
                        <h3 data-lang="about_role">Python Developer & 架构师</h3>
                        <p class="about-description" data-lang="about_description">我是一名Python Developer，擅长消息中间件、实时数据处理、高可用架构设计。拥有丰富的后端开发和系统架构经验。</p>
                        <p class="about-interests" data-lang="about_interests">我对新技术充满热情，喜欢解决复杂问题。业余时间喜欢Rust编程，也是动漫爱好者，喜欢幸运星、孤独摇滚、摇曳露营等作品。</p>
                        <div class="about-contact-info">
                            <span><i class="fas fa-envelope"></i> kirineko@qq.com</span>
                            <span><i class="fas fa-phone"></i> <span data-lang="about_phone">+86 123 4567 8901</span></span>
                            <span><i class="fas fa-map-marker-alt"></i> <span data-lang="about_location">中国北京市</span></span>
                        </div>
                    </div>
                </div>

                <!-- 专业经历和成就区域 -->
                <div class="about-details">
                    <!-- 专业经历时间线 -->
                    <div class="timeline-section">
                        <h3 data-lang="about_experience">专业经历</h3>
                        <div class="timeline">
                            <div class="timeline-item">
                                <div class="timeline-year" data-lang="about_timeline1_date">2010-2014</div>
                                <div class="timeline-content">
                                    <h4 data-lang="about_timeline1_title">清华大学</h4>
                                    <p data-lang="about_timeline1_desc">计算机科学与技术专业，本科</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-year" data-lang="about_timeline2_date">2014-2016</div>
                                <div class="timeline-content">
                                    <h4 data-lang="about_timeline2_title">斯坦福大学</h4>
                                    <p data-lang="about_timeline2_desc">计算机科学专业，硕士</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-year" data-lang="about_timeline3_date">2017-2020</div>
                                <div class="timeline-content">
                                    <h4 data-lang="about_timeline3_title">Google</h4>
                                    <p data-lang="about_timeline3_desc">软件工程师，负责分布式系统开发</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-year" data-lang="about_timeline4_date">2021-2023</div>
                                <div class="timeline-content">
                                    <h4 data-lang="about_timeline4_title">OpenAI</h4>
                                    <p data-lang="about_timeline4_desc">软件工程师，专注于AI基础设施和实时数据处理</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 个人成就 -->
                    <div class="achievements-section">
                        <h3 data-lang="about_achievements">个人成就</h3>
                        <div class="achievements-grid">
                            <div class="achievement-card">
                                <i class="fas fa-award"></i>
                                <h4 data-lang="about_achievement1_title">清华大学优秀毕业生</h4>
                                <p data-lang="about_achievement1_desc">学术成绩优异，综合能力突出</p>
                            </div>
                            <div class="achievement-card">
                                <i class="fas fa-trophy"></i>
                                <h4 data-lang="about_achievement2_title">微软MVP</h4>
                                <p data-lang="about_achievement2_desc">Most Valuable Professional 技术专家认证</p>
                            </div>
                            <div class="achievement-card">
                                <i class="fas fa-certificate"></i>
                                <h4 data-lang="about_achievement3_title">华为开发者认证</h4>
                                <p data-lang="about_achievement3_desc">高级开发者认证，专业技术认可</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 技能部分 -->
        <section id="skills" class="section">
            <div class="container">
                <h2 class="section-title" data-lang="skills_title">我的技能</h2>
                <div class="skills-content">
                    <div class="skill-category">
                        <h3 data-lang="skills_core_tech">核心技术</h3>
                        <div class="skill-bar">
                            <div class="skill-info">
                                <span>Python</span>
                                <span>95%</span>
                            </div>
                            <div class="skill-progress">
                                <div class="skill-progress-bar" style="width: 95%"></div>
                            </div>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-info">
                                <span>MongoDB</span>
                                <span>90%</span>
                            </div>
                            <div class="skill-progress">
                                <div class="skill-progress-bar" style="width: 90%"></div>
                            </div>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-info">
                                <span>Next.js</span>
                                <span>85%</span>
                            </div>
                            <div class="skill-progress">
                                <div class="skill-progress-bar" style="width: 85%"></div>
                            </div>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-info">
                                <span>ElasticSearch</span>
                                <span>80%</span>
                            </div>
                            <div class="skill-progress">
                                <div class="skill-progress-bar" style="width: 80%"></div>
                            </div>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-info">
                                <span>Rust</span>
                                <span>75%</span>
                            </div>
                            <div class="skill-progress">
                                <div class="skill-progress-bar" style="width: 75%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="skill-category">
                        <h3 data-lang="skills_professional">专业技能</h3>
                        <div class="skill-bar">
                            <div class="skill-info">
                                <span data-lang="skills_messaging">消息中间件</span>
                                <span>90%</span>
                            </div>
                            <div class="skill-progress">
                                <div class="skill-progress-bar" style="width: 90%"></div>
                            </div>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-info">
                                <span data-lang="skills_realtime">实时数据处理</span>
                                <span>88%</span>
                            </div>
                            <div class="skill-progress">
                                <div class="skill-progress-bar" style="width: 88%"></div>
                            </div>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-info">
                                <span data-lang="skills_architecture">高可用架构设计</span>
                                <span>85%</span>
                            </div>
                            <div class="skill-progress">
                                <div class="skill-progress-bar" style="width: 85%"></div>
                            </div>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-info">
                                <span data-lang="skills_distributed">分布式系统</span>
                                <span>82%</span>
                            </div>
                            <div class="skill-progress">
                                <div class="skill-progress-bar" style="width: 82%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 项目部分 -->
        <section id="projects" class="section">
            <div class="container">
                <h2 class="section-title" data-lang="projects_title">我的项目</h2>
                <div class="projects-grid">
                    <div class="project-card">
                        <div class="project-image">
                            <img src="images/project1.jpg" alt="电商网站项目">
                        </div>
                        <div class="project-content">
                            <h3 data-lang="project1_title">电商网站</h3>
                            <p data-lang="project1_desc">一个全功能的电商网站，包含商品展示、购物车、支付等功能。</p>
                            <div class="project-tags">
                                <span class="tag">React</span>
                                <span class="tag">Node.js</span>
                                <span class="tag">MongoDB</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="btn small" data-lang="project_view_details">查看详情</a>
                                <a href="#" class="btn small secondary" data-lang="project_view_code">源码</a>
                            </div>
                        </div>
                    </div>
                    <div class="project-card">
                        <div class="project-image">
                            <img src="images/project2.jpg" alt="任务管理系统项目">
                        </div>
                        <div class="project-content">
                            <h3 data-lang="project2_title">任务管理系统</h3>
                            <p data-lang="project2_desc">一个企业级任务管理系统，支持团队协作和进度跟踪。</p>
                            <div class="project-tags">
                                <span class="tag">Vue.js</span>
                                <span class="tag">Express</span>
                                <span class="tag">PostgreSQL</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="btn small" data-lang="project_view_details">查看详情</a>
                                <a href="#" class="btn small secondary" data-lang="project_view_code">源码</a>
                            </div>
                        </div>
                    </div>
                    <div class="project-card">
                        <div class="project-image">
                            <img src="images/project3.jpg" alt="数据分析平台项目">
                        </div>
                        <div class="project-content">
                            <h3 data-lang="project3_title">数据分析平台</h3>
                            <p data-lang="project3_desc">一个数据可视化平台，支持多种图表展示和数据分析功能。</p>
                            <div class="project-tags">
                                <span class="tag">D3.js</span>
                                <span class="tag">Python</span>
                                <span class="tag">Flask</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="btn small" data-lang="project_view_details">查看详情</a>
                                <a href="#" class="btn small secondary" data-lang="project_view_code">源码</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系我部分 -->
        <section id="contact" class="section">
            <div class="container">
                <h2 class="section-title" data-lang="contact_title">联系我</h2>
                <div class="contact-content">
                    <div class="contact-info">
                        <h3 data-lang="contact_let_chat">让我们聊聊</h3>
                        <p data-lang="contact_description">如果您有任何项目合作或工作机会，欢迎随时联系我。</p>
                        <div class="contact-methods">
                            <div class="contact-method">
                                <i class="fas fa-envelope"></i>
                                <span>kirineko@qq.com</span>
                            </div>
                            <div class="contact-method">
                                <i class="fas fa-phone"></i>
                                <span data-lang="contact_phone">+86 123 4567 8901</span>
                            </div>
                            <div class="contact-method">
                                <i class="fas fa-map-marker-alt"></i>
                                <span data-lang="contact_location">中国北京市</span>
                            </div>
                        </div>
                        <div class="social-links">
                            <a href="https://kirineko.github.io" target="_blank" title="个人网页"><i class="fas fa-home"></i></a>
                            <a href="mailto:kirineko@qq.com" title="邮箱"><i class="fas fa-envelope"></i></a>
                            <a href="#"><i class="fab fa-github"></i></a>
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                    <div class="contact-form">
                        <form id="contactForm">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="name" data-lang="contact_name_label">姓名</label>
                                    <input type="text" id="name" name="name" data-lang-placeholder="contact_name_placeholder" placeholder="请输入您的姓名" required>
                                </div>
                                <div class="form-group">
                                    <label for="email" data-lang="contact_email_label">邮箱</label>
                                    <input type="email" id="email" name="email" data-lang-placeholder="contact_email_placeholder" placeholder="请输入您的邮箱地址" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="message" data-lang="contact_message_label">留言</label>
                                <textarea id="message" name="message" data-lang-placeholder="contact_message_placeholder" placeholder="请输入您想要说的话..." rows="5" required></textarea>
                            </div>
                            <button type="submit" class="btn primary" data-lang="contact_send_message">发送消息</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p data-lang="footer_copyright">&copy; 2025 张三. 保留所有权利。</p>
            <p style="margin-top: 10px; font-size: 0.9rem; color: #95a5a6;">
                <i class="fas fa-envelope"></i> kirineko@qq.com
            </p>
        </div>
    </footer>

    <script src="theme.js"></script>
    <script src="languages.js"></script>
    <script src="main.js"></script>
</body>
</html>